<template>
	<view class="search-bar">
		<view class="city" @click="handCity">
			<text class="city-name">{{ cityName || '未定位' }}</text>
			<image src="/static/icon/down.png" mode=""></image>
		</view>
		<view class="zdy-input" @click="handSearch">
			<image src="/static/icon/search.png" mode=""></image>
			<text>{{ tips }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		doHor
	} from '@/apis/search.js'
	const emit = defineEmits(['cityChange'])
	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo,
		getCityName: cityName
	} = storeToRefs(useStore)

	let tips = ref("")

	const handSearch = async () => {
		await handUser()
		uni.navigateTo({
			url: '/pages/search/index'
		})
	}

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}

	const init = async () => {
		const data = await doHor()
		if (data.records.length > 0) {
			tips.value = `大家都在搜“${data.records[0].searchContent}”`
		} else {
			tips.value = '请输入搜索关键字'
		}
	}

	const handCity = () => {
		uni.navigateTo({
			url: '/pagesA/other/city',
			events: {
				someEvent: (e) => {
					emit('cityChange', e)
				}
			}
		})
	}

	init()
	defineExpose({
		init,
	})
</script>

<style lang="scss" scoped>
	.search-bar {
		padding: 0 24rpx 24rpx;
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 3;
		background-color: #fff;

		.city {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;

			&-name {
				padding-right: 5rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.zdy-input {
			margin-left: 14rpx;
			flex: 1;
			height: 74rpx;
			background: #F5F5F5;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 24rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>